Skip to content

Feature: Status Center — wrap long titles to 2 lines, allow resize of status center, & persist size #17806

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Feature: Status Center — wrap long titles to 2 lines, allow resize of status center, & persist size #17806

wants to merge 1 commit into from
+214 −47

Conversation

@abendrothj
Copy link

Resolved / Related Issues

Summary

  • Implemented 2‑line title wrapping with ellipsis for long task names.
  • Removed outer ScrollViewer; ListView now receives a finite width and handles vertical scrolling only.
  • Header uses Auto | * | Auto; star text column has MinWidth="0" to prevent push/overflow; actions remain right‑aligned.
  • Width constraints: 300–600 px enforced in XAML and persisted.
  • Height constraints: 200–800 px enforced by resize logic in code‑behind and persisted.
  • Progress/graph/footer areas stretch within available space and do not force horizontal growth.

Files Modified:

  • src/Files.App/UserControls/StatusCenter/StatusCenter.xaml — Final layout fixes: removed outer ScrollViewer, icon|star|actions header, star column MinWidth="0", title wraps (2 lines + ellipsis), no overflow
  • src/Files.App/UserControls/StatusCenter/StatusCenter.xaml.cs — Resize manipulation logic, grip handlers, settings persistence
  • src/Files.App/Services/Settings/AppSettingsService.cs — Added StatusCenterWidth/StatusCenterHeight with defaults + persistence
  • src/Files.App/Data/Contracts/IAppSettingsService.cs — Added interface members for StatusCenterWidth/StatusCenterHeight
  • src/Files.App/UserControls/NavigationToolbar.xaml — Bound Flyout/FlyoutPresenter dimensions to settings; enforced min/max constraints
  • src/Files.App/UserControls/NavigationToolbar.xaml.cs — Wired settings to toolbar flyout open/resize flow
  • src/Files.App/Assets/FilesOpenDialog/Files.App.Launcher.exe.sha256 — Updated checksum generated by build tooling

Key Implementation:

  • Text Wrapping: MaxLines="2" TextWrapping="Wrap" on header TextBlock
  • Resize Constraints: Multiple levels (UserControl, Root Grid, FlyoutPresenter)
  • Min/Max Width: 300px-600px enforced at all constraint levels
  • Min/Max Height: 200px-800px enforced
  • Settings: Stored in AppSettingsService, persisted to Settings.dat

Validation Approach

  • Manual verification.
  • Validated:
    • Long titles wrap to 2 lines with ellipsis; tooltip shows full text
    • No horizontal overflow; actions remain right-aligned
    • Resize grip works; width stays within 300–600 px; height 200–800 px
    • Vertical scrolling only (no horizontal scrollbars)
    • Empty state message and accessibility basics

Steps used to test these changes

  1. Opened Files and launched Status Center from the toolbar.
  2. Triggered operations with 60–80 character names.
  3. Verified 2-line wrapping with ellipsis; tooltip shows full text.
  4. Resized Status Center narrower/wider; ensured no overflow, actions visible.
  5. Confirmed vertical scroll only, no horizontal scrollbars.
  6. Checked empty state and keyboard navigation.

Screenshots/GIFs to attach

  • Before: overflow with long title.
296109219-4a01ebfb-7696-4e5d-baf5-e8b7831f981a

Risks

  • UI-only change scoped to Status Center.
  • No functional or data-flow changes; virtualization unaffected.

Code Quality and Conventions

  • MVVM boundaries preserved; no business logic moved into views.
  • XAML follows Styler-friendly patterns; no brittle width math/bindings.
  • Accessibility considered (tooltips, names, keyboard operation).
  • Adheres to repository naming and structure guidelines (classes, ViewModels, services, styles).

@abendrothj
Fix: Status Center - 2-line title wrapping, no overflow, stable resiz…
b51e477 
…ing; remove unused converter; bind flyout constraints and persist size
sentry-io[bot]
sentry-io bot reviewed Oct 28, 2025
View reviewed changes
src/Files.App/UserControls/StatusCenter/StatusCenter.xaml.cs
private void ResizeGrip_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var cumulative = e.Cumulative;
var newWidth = _initialSize.Width - cumulative.Translation.X; // Negative because we're resizing from bottom-left
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The width calculation _initialSize.Width - cumulative.Translation.X is inverted for the bottom-left resize grip, causing unexpected narrowing.
Severity: HIGH | Confidence: 0.95

🔍 Detailed Analysis

When resizing the Status Center using the bottom-left grip, dragging the grip to the right (positive Translation.X) causes the panel to narrow instead of widen. This occurs because the width calculation uses _initialSize.Width - cumulative.Translation.X, which inverts the expected behavior for a left-positioned resize handle. Users cannot intuitively resize the Status Center wider by dragging the grip to the right, as the behavior is opposite to standard window resizing conventions.

💡 Suggested Fix

Change the width calculation in ResizeGrip_ManipulationDelta from var newWidth = _initialSize.Width - cumulative.Translation.X; to var newWidth = _initialSize.Width + cumulative.Translation.X; to align with standard resize behavior.

🤖 Prompt for AI Agent 
Fix this bug. In src/Files.App/UserControls/StatusCenter/StatusCenter.xaml.cs at line
77: When resizing the Status Center using the bottom-left grip, dragging the grip to the
right (positive `Translation.X`) causes the panel to narrow instead of widen. This
occurs because the width calculation uses `_initialSize.Width -
cumulative.Translation.X`, which inverts the expected behavior for a left-positioned
resize handle. Users cannot intuitively resize the Status Center wider by dragging the
grip to the right, as the behavior is opposite to standard window resizing conventions.

Did we get this right? 👍 / 👎 to inform future reviews.

@mdtauk
Copy link
Contributor

mdtauk commented Oct 28, 2025

Not sure the resize glyph is required.

Does the full text appear as a tooltip, when it is trimmed with an ellipsis even when over two lines?

@abendrothj
Copy link
Author

Addressing comments by @sentry-io[bot] and @mdtauk, thanks; two quick clarifications:

  1. Resize math is intentional (@sentry-io[bot])
  • This is the bottom-left grip of a right-anchored Status Center. A positive cumulative.Translation.X (dragging right) moves the left edge inward, so the panel width decreases. That is why the code uses:
    var newWidth = _initialSize.Width - cumulative.Translation.X
  • The inline comment should be clarified to explain that positive Translation.X moves the left edge right, reducing width.
  1. Tooltip for long titles (@mdtauk )
  • The header TextBlock uses MaxLines="2" and TextWrapping="Wrap" with ellipsizing, and a ToolTip is bound to the full title (see StatusCenter.xaml). I can paste the exact XAML line or add an inline XAML comment if that would help.
  1. Resize glyph necessity (@mdtauk )
  • The visible glyph is the bottom-left resize handle for the right-anchored flyout. Just thought it provides a larger hit target so users can discover the resize behavior. If you want it changed or removed, please say which change you prefer.

@yaira2
Copy link
Member

yaira2 commented Oct 28, 2025

@abendrothj thank you for the PR. The original idea was to just wrap the text without support for manually resizing the flyout, but that said, it does look pretty cool and I don't mind discussing it further 🙂

@yaira2
Copy link
Member

yaira2 commented Oct 28, 2025

I also want to point out #15431 which is tracking support to 'pin' the Status Center open. We haven't fully explored the idea yet, but my initial idea was for a side pane to be displayed when users pin the Status Center. If we were to do that, the resize behavior would probably be a better fit there.

@yaira2 yaira2 added the ready for review Pull requests that are ready for review label Oct 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@sentry-io sentry-io[bot] sentry-io[bot] left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

ready for review Pull requests that are ready for review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Feature: Improve text wrapping in the Status Center

3 participants

@abendrothj @mdtauk @yaira2